<template>
  <div class="comment-page">
    <div class="comment-btn">
      <van-button type="primary" size="small" @click="addComment" :disabled="!btnDisabled">添加评论</van-button>
    </div>
    <div class="comment-field borderTop" v-for="(item, index) in commentList" :key="index">
      <div class="comment-img border">
        <img :src="item.userId.headerImg" alt="" onerror="this.src='http://cs-static-assets.oss-cn-beijing.aliyuncs.com/ds_system/errorimg.png'" width="100%" />
      </div>
      <div class="comment-right">
        <div class="name-time">
          <span>{{item.userName}}评论于{{new Date(item.commentTime).toLocaleString()}}</span>
          <i class="iconfont icon-shanchu" @click="handleDelete(item._id)" v-if="item.isCanDelete" />
        </div>
        <div class="comment-text">{{item.content}}</div>
      </div>
    </div>
    <van-popup v-model="show" position="right">
      <van-field
        v-model="message"
        label="评论"
        type="textarea"
        placeholder="请输入评论"
        rows="3"
        autosize
      />
      <div class="btn-field">
        <van-button type="danger" size="small" @click="handleCancel">取消</van-button>
        <van-button type="primary" size="small" @click="handleSumbit" :disabled="!message">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import axios from 'axios';
  import { Toast, Dialog } from 'vant';
  import requestUrl from '../../serverApi';
  import Bus from '../../bus';
  export default {
    data() {
      return {
        show: false,
        message: '',
        userId: '',
        goodsId: this.$route.query.goodsId,
        commentList: [],
        btnDisabled: document.cookie && document.cookie.split('=')[1],
      }
    },
    created() {
      this.getComment();
      this.getCurrentUser();
    },
    methods: {
      getComment() {
        const cookie = document.cookie;
        const userName = cookie && cookie.split('=')[1];
        const url = `${requestUrl.getComment}?goodsId=${this.goodsId}`;
        axios.get(url).then((res) => {
          const data = res.data;
          const { code, message } = data;
          if (code === 200 && message) {
            const messageList = message.map(item => {
              return {
                ...item,
                isCanDelete: userName === item.userName
              }
            })
            this.commentList = messageList;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      getCurrentUser() {
        const cookie = document.cookie;
        const userName = cookie && cookie.split('=')[1];
        if (cookie && userName) {
          const url = `${requestUrl.getCurrentUser}?userName=${userName}`;
          axios.get(url).then((result) => {
            const data = result.data;
            if (data.code === 200 && data.message) {
              this.userId = data.message._id;
            }
          }).catch((err) => {
            console.log(err);
          });
        }
      },
      addComment() {
        this.show = true;
      },
      handleCancel() {
        this.show = false;
        this.message = '';
      },
      handleSumbit() {
        axios.post(requestUrl.addComment, {
          userName: document.cookie.split('=')[1],
          userId: this.userId,
          content: this.message,
          goodsId: this.goodsId,
        }).then((res) => {
          const data = res.data;
          if (data.code === 200) {
            Toast.success(data.message);
            this.show = false;
            this.message = '';
            this.getComment();
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      deleteComment(commentId) {
        const url = `${requestUrl.deleteComment}?commentId=${commentId}`;
        axios.delete(url).then((res) => {
          const data=  res.data;
          if (data.code === 200) {
            this.getComment();
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      handleDelete(commentId) {
        // 删除评论
        Dialog.confirm({
          title: '提示',
          message: '确定删除该评论?'
        }).then(() => {
          this.deleteComment(commentId);
        }).catch(() => {
          // onCancel
        })
      },
    },
  }
</script>

<style scoped>
  .comment-page {
    background-color: #fff;
  }
  .comment-btn {
    padding: 10px;
    text-align: right;
  }
  .comment-field {
    padding: 10px;
    display: flex;
  }
  .comment-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .comment-img img {
    border-radius: 50%;
  }
  .comment-right {
    flex: 1;
  }
  .name-time {
    color: skyblue;
    font-size: 12px;
    display: flex;
    justify-content: space-between;

  }
  .van-popup {
    width: 100%;
    height: 100%;
  }
  .btn-field {
    text-align: right;
    padding: 10px;
  }
  .comment-text {
    font-size: 14px;
  }
</style>